<template>
	<div class="goods base-flex">
		<img class="goods-img" :src="item.itemImg" alt="" />
		<div class="info">
			<el-tooltip :content="item.itemTitle" placement="top">
				<div class="title">
					<span class="source">{{ item.source == 1 ? '京东' : '淘宝' }}</span>
					<a :href="info ? info.itemLink : item.itemLink" target="_black">{{
						item.itemTitle
					}}</a>
				</div>
			</el-tooltip>
			<div class="base-flex num">
				<div class="date">
					<div>商品ID：{{ item.itemId }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	props: {
		item: Object
	},
	data() {
		return {
			info: this.item.orderInfo ? JSON.parse(this.item.orderInfo) : undefined
		};
	},
	watch: {},
	computed: {
		hesitateTime() {
			let diff = this.item.tkPaidTime - this.item.tkCreateTime;

			return moment(diff).format('ss');
		}
	},
	methods: {
		toStamp(stamp) {
			return moment(stamp).format('YYYY-MM-DD HH:mm:ss');
		}
	}
};
</script>
<style lang="scss" scoped>
.goods {
	@include flexBox();
	.goods-img {
		min-width: 72px;
		height: 72px;
		border-radius: 5px;
	}
	.info {
		margin-left: 9px;
		text-align: left;
		.title {
			color: #333333;
			font-weight: bold;
			font-size: $font14;
			width: 400px;
			@include ellipsis(1);
			margin-bottom: 10px;
			a {
				color: $text-title;
			}
			cursor: pointer;
			:hover {
				color: $color-link;
			}
		}
		.num {
			color: $text-grey;
			font-size: $font12;
			line-height: 16px;
			.date {
				margin-right: 50px;
			}
		}
	}
	.source {
		background-color: red;
		color: #fff;
		border-radius: 3px;
		font-size: 12px;
		padding: 2px;
		transform: scale(0.9);
		letter-spacing: 1px;
		margin-right: 5px;
	}
}
</style>
